<template>
  <div class="inOut-stock-warp">
    <div class="inOut-stock-title">
      <h3>出入库趋势</h3>
      <a href="javascript:;" @click="toWorkLog">更多 &gt</a>
    </div>

    <div id="inOutStock" style="width: 100%;height: 314px;">

    </div>
  </div>
</template>

<script>
  let echarts = require('echarts');
  let myChart;
  export default ({
    props:['json'],
    data(){
      return {
      }
    },
    watch:{
      json(val){
        this.drawChart(val);
      }
    },
    methods:{
      drawChart(val){
        let oneDayTime = 24 * 3600 * 1000;
        let xAxises = [];
        let minDate = Math.min.apply(null, val.map(it=> Date.from(it.year,it.day).valueOf() )),
          maxDate = Math.max.apply(null, val.map(it=> Date.from(it.year,it.day).valueOf() ));

        //var instockValues = [],outStockValues = [], handlingValues = [];

        for (let i = minDate; i <= maxDate; i = i + oneDayTime) {
          let xName = i.toDateString("yyyy-MM-dd");
          xAxises.push(xName);
        }

        let option =  {
          color: ['#72c14c','#409feb', '#ffd263'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ["入库","出库","配送"],
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              axisLine:{
                lineStyle:{
                  color:'#9b9b9b'
                }
              },
              data: xAxises
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine:{show: false},//取消辅助线
              axisLine:{
                lineStyle:{
                  color:'#9b9b9b'
                }
              },
            },
          ],
          series: [
            {
              name: '入库',
              type: 'bar',
              barWidth : 15,
              data: val.filter(it=>it.action == "InStock").map(it=>it.count)
            },
            {
              name: '出库',
              type: 'bar',
              barGap: 0,
              barWidth : 15,//条形宽度
              data: val.filter(it=>it.action == "OutStock").map(it=>it.count)
            },
            {
              name: '配送',
              type: 'bar',
              barWidth : 15,
              data: val.filter(it=>it.action == "Handling").map(it=>it.count)
            },
          ]
        };
        myChart = echarts.init(document.getElementById('inOutStock'));
        myChart.setOption(option);

        window.myChart = myChart;
        window.json = val;
        window.option = option;
      },
        toWorkLog(){
          this.$router.push('/info/codeLog');
        }
    }
  })
</script>

<style scoped>
 .inOut-stock-warp{
   width: 958px;
   border: 1px solid #e8e8e8;
   border-radius: 5px;
   margin-top: 20px;
 }
  .inOut-stock-title{
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #e8e8e8;
  }
 .inOut-stock-title h3{
   margin-left: 20px;
 }
  .inOut-stock-title a{
    font-size: 12px;
    color: #0e83e6;
    margin-right: 20px;
  }
</style>
